<template>
  <div class="age-distribution-container">
    <div class="chart-header">
      <h3 class="chart-title">患者年龄分布</h3>
      <div class="date-navigation">
        <i class="el-icon-arrow-left date-arrow" @click="prevDate"></i>
        <span class="date-text">{{ currentDate }}</span>
        <i class="el-icon-arrow-right date-arrow" @click="nextDate"></i>
      </div>
    </div>
    <div class="chart-content">
      <div class="chart-wrapper">
        <div ref="chartContainer" class="chart-container"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'AgeDistribution',
  data() {
    return {
      currentDate: '周二 2025/08/12',
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chartContainer)
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            const data = params[0]
            return `${data.name}<br/>患者数: ${data.value}人<br/>占比: ${data.percent}%`
          }
        },
        grid: {
          left: '15%',
          right: '10%',
          top: '10%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          min: 0,
          max: 600,
          interval: 100,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#666666',
            fontSize: 12
          },
          splitLine: {
            lineStyle: {
              color: '#f0f0f0',
              type: 'dashed'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['17岁以下', '18~24岁', '25~29岁', '30~39岁', '40~49岁', '50岁以上', '未知'],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#333333',
            fontSize: 12
          }
        },
        series: [
          {
            name: '患者数',
            type: 'bar',
            data: [
              { value: 32, itemStyle: { color: '#ff7f50' } },
              { value: 137, itemStyle: { color: '#87ceeb' } },
              { value: 149, itemStyle: { color: '#98fb98' } },
              { value: 559, itemStyle: { color: '#ffd700' } },
              { value: 352, itemStyle: { color: '#87ceeb' } },
              { value: 218, itemStyle: { color: '#ffa500' } },
              { value: 14, itemStyle: { color: '#ff69b4' } }
            ],
            barWidth: '60%',
            label: {
              show: true,
              position: 'right',
              formatter: function(params) {
                const data = params.data
                const total = 1461 // 总患者数
                const percent = ((data.value / total) * 100).toFixed(2)
                return `${data.value}人 ${percent}%`
              },
              color: '#333333',
              fontSize: 12
            }
          }
        ]
      }
      
      this.chart.setOption(option)
      
      // 响应式处理
      window.addEventListener('resize', this.handleResize)
    },
    
    handleResize() {
      if (this.chart) {
        this.chart.resize()
      }
    },
    
    prevDate() {
      // 实现日期向前切换逻辑
      console.log('上一日期')
    },
    
    nextDate() {
      // 实现日期向后切换逻辑
      console.log('下一日期')
    }
  }
}
</script>

<style lang="scss" scoped>
.age-distribution-container {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  height: 100%;
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  position: relative;
}

.chart-title {
  font-size: 18px;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.date-navigation {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666666;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.date-arrow {
  cursor: pointer;
  font-size: 16px;
  color: #999999;
  transition: color 0.3s;
  
  &:hover {
    color: #409eff;
  }
}

.date-text {
  font-size: 14px;
  color: #666666;
  min-width: 120px;
  text-align: center;
}

.chart-content {
  display: flex;
  flex-direction: column;
  height: calc(100% - 60px);
}

.chart-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-container {
  width: 100%;
  height: 400px;
}

// 响应式设计
@media (max-width: 768px) {
  .chart-header {
    flex-direction: column;
    gap: 12px;
  }
  
  .date-navigation {
    position: static;
    transform: none;
  }
}
</style>
